<template>
  <div class="ApprovalLog" v-loading="loading">
    <el-timeline>
      <el-timeline-item v-for="task in processedTasks" :key="task.ID">
        <div class="title">
          <div class="ava">
            <el-tag size="small" effect="plain"
              :type="task.taskStatus == G.TASK_STATUS.INITIATE_APPLICATION ? 'success' : 'danger'"
              class="avaTitle">
              {{ task.title }}
            </el-tag>
            <EbAvatar :src="task.user.avatar" />
          </div>
          <el-divider direction="vertical" />
          <div>{{ task.user.userName }}</div>
          <el-divider direction="vertical" />
          <div class="info" v-if="task.user.dept">{{ task.user.dept.deptName }}
          </div>
          <el-divider direction="vertical" />
          <div class="info">{{ task.typeText }}</div>
          <span
            v-if="task.typeText == G.TASK_TYPE_NAME.APPROVER_TASK && task.hasOwnProperty('counterSign')"
            class="info">
            <el-divider direction="vertical" />
            <div>
              <el-tag :type="task.counterSign ? 'success' : 'warning'"
                size="small">{{
                  task.counterSign ? '会签' : '或签'
                }}</el-tag>
            </div>
          </span>
          <el-divider direction="vertical" />
          <div><small style="color: #9e9e9e">processDesignId</small>：{{
            task.processDesignId }}</div>
          <el-divider direction="vertical" />
          <div><small style="color: #9e9e9e">ID</small>：{{ task.ID }}</div>
        </div>
        <div class="info2">
          <span class="time">
            <el-icon>
              <Clock />
            </el-icon>
          </span>
          <span> {{
            task.statusText == G.TASK_STATUS_NAME.INITIATE_APPLICATION ? '创建时间'
              : '接收时间'
            }}：{{ task.createTime }}</span>
          <el-divider direction="vertical" />
          <span>
            taskGroupId：{{ task.taskGroupId }}
          </span>
          <el-divider direction="vertical" />
          <span>
            actionTaskId：{{ task.actionTaskId }}
          </span>
          <el-divider direction="vertical" />
          <span>
            <TaskStatusTag :taskStatus="task.taskStatus" />
          </span>
        </div>
        <div class="info3">
          taskActionType：
          <el-tag size="small" :type="task.taskActionType == 1 ? 'danger' : 'info'">
            {{Object.values(G.TASK_ACTION_TYPE_NAME)[
              Object.values(G.TASK_ACTION_TYPE).findIndex((taskActionType) => task.taskActionType
                == taskActionType)
            ] }}
          </el-tag>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script setup name="ApprovalLog">
import { getLog } from "@/api/flow/instances.js";
import { G } from "@/views/flow/globalVar.js";
import {
  getGNameVlaueByvv,
  getStatusColor
} from "@/views/flow/tool.js";
const props = defineProps({
  processInstancesId: {
    type: [String,
      Number],
    default: () => {
      return ''
    }
  },
})
const loading = ref(false)
const processedTasks = ref(undefined)
const load = () => {
  if (props.processInstancesId) {
    loading.value = true
    getLog(props.processInstancesId)
      .then((res) => {
        processedTasks.value = res.data.map(task => {
          const statusText = getGNameVlaueByvv({
            type: 'TASK_STATUS',
            vValue: task.taskStatus
          });
          const typeText = getGNameVlaueByvv({
            type: 'TASK_TYPE',
            vValue: task.taskType
          });
          return {
            ...task,
            statusText,
            typeText
          };
        });
        loading.value = false
      })
  }
}
onMounted(() => {
  load()
})
</script>
<style scoped lang="scss">
.ApprovalLog {
  .title {
    display: flex;
    align-items: center;
    font-size: 14px;

    .ava {
      display: flex;
      flex-direction: column;
      position: relative;

      .avaTitle {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .info {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #9e9e9e;
    }
  }

  .info2,
  .info3 {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #9e9e9e;
    margin-top: 8px;

    .time {
      margin-right: 3px;
      position: relative;
      top: 2px;
    }
  }
}
</style>
